<template>
  <view class="container">
    <nav-bar title="打印设置" class="nav-bar" />

    <div class="card" v-if="isPrinter == 1">
      <view v-for="(item, index) in operList" :key="index" class="con">
        <view class="oper">
          <u-checkbox-group
            v-model="item.checked"
            @change="handleChange(item.id)"
            ><u-checkbox
              :name="item.id"
              :label="item.label"
              labelColor="#000000"
              labelSize="29rpx"
            ></u-checkbox
          ></u-checkbox-group>
          <text @click="look(item.id)" :style="{ color: themeColor }"
            >查看样式</text
          >
        </view>
        <view class="tip">{{ item.txt }}</view>
      </view>
    </div>
    <view
      class="order-broadcast flexAIC text-30 paddingTwo-23-0 flex-btw"
      v-if="isSpeaker == 1"
    >
      <view class="left"> 订单通知播报 </view>
      <view v-if="speakerMsg.ttsStatus == 1">
        <u-switch
          v-model="speakerMsg.status"
          :activeColor="themeColor"
          inactiveColor="#EBEBEB"
          :activeValue="1"
          :inactiveValue="0"
          @change="changeSpeckStatus"
        ></u-switch>
      </view>
      <view class="error" v-else> 暂不支持 </view>
    </view>
    <!-- <div class="footer">
      <u-button @click="save" type="primary" text="保存"></u-button>
    </div> -->

    <print-sample ref="printSample"></print-sample>
  </view>
</template>

<script>
import printSample from "@/components/pageComponents/sp-equi/print-sample/index.vue";
import {
  queryPrinterBySn,
  setPrinter,
  speakerDetail,
  setSpeaker,
} from "@/service/api/sp-equi";
import { mapState } from "vuex";
export default {
  components: { printSample },
  data() {
    return {
      checked: [],
      detail: null,
      isPrinter: 1,
      isSpeaker: 1,
      speakerMsg: {},
      operList: [
        {
          id: "isCanyinProduce",
          label: "制作单",
          txt: "提示：制作单指后厨订单小票",
          checked: [],
        },
        {
          id: "isCanyinConsume",
          label: "消费单",
          txt: "提示：消费单指消费者已完成支付的堂食、打包订单小票",
          checked: [],
        },
      ],
    };
  },
  computed: {
    themeColor({ $theme }) {
      return $theme.themeColor.primary;
    },
    ...mapState("sp-common/auth", ["pubUserInfo"]),
    industry({ pubUserInfo }) {
      return Number(pubUserInfo?.pubDomainShopVo?.industry);
    },
  },
  watch: {
    checked(val) {
      this.operList.map((v) => {
        v.checked = val;
      });
    },
  },
  created() {},
  mounted() {
    console.log("equiEdit", this.$Route.query);
    this.fetchData();
  },
  methods: {
    async fetchData() {
      const { equipSn, pubDomainShopId, isPrinter, isSpeaker } =
        this.$Route.query;
      this.isPrinter = isPrinter;
      this.isSpeaker = isSpeaker;
      if (isPrinter == 1) {
        await this.getPrinter();
      }
      if (isSpeaker == 1) {
        await this.getSpeaker();
      }
    },
    handleChange(sign) {
      if (this.checked.includes(sign)) {
        this.checked = this.checked.filter((v) => v !== sign);
      } else {
        this.checked.push(sign);
      }
      console.log(sign,this.checked);
      this.save()
    },
    async save() {
      this.detail.isCanyinConsume = this.checked.includes("isCanyinConsume");
      this.detail.isCanyinProduce = this.checked.includes("isCanyinProduce");
      const res = await setPrinter(this.detail).catch((err) => {
        uni.showToast({
          icon: "none",
          title: err?.msg,
        });
      });
      if (res?.code === 0) {
        uni.showToast({
          title: "设置成功",
          icon: "success",
          success:()=>{
            this.getPrinter()
          }
        });
      }
    },
    async getPrinter() {
      const { equipSn, pubDomainShopId, isPrinter, isSpeaker } =
        this.$Route.query;
      const res = await queryPrinterBySn({
        pubDomainShopId,
        snCode: equipSn,
      });
      if (res) {
        this.detail = res;
        const { isCanyinConsume, isCanyinProduce } = res;
        isCanyinConsume && this.checked.push("isCanyinConsume");
        isCanyinProduce && this.checked.push("isCanyinProduce");
      }
      if (this.industry > 100) {
        this.operList = this.operList.filter((v) => v.id !== "isCanyinProduce");
      }
    },
    async getSpeaker() {
      const { equipSn, pubDomainShopId, isPrinter, isSpeaker } =
        this.$Route.query;
      let res = await speakerDetail({ pubDomainShopId, snCode: equipSn });
      if (res) {
        this.speakerMsg = res;
      }
    },
    look(val) {
      this.$refs.printSample.open(val);
    },
    async changeSpeckStatus(val) {
      let { id } = this.speakerMsg;
      const res = await setSpeaker({ id, status: val }).catch((err) => {
        uni.showToast({
          icon: "none",
          title: err?.msg,
        });
      });
      if (res?.code == 0) {
        uni.showToast({
          title: "设置成功",
          icon: "success",
          success:()=>{
            this.getSpeaker();
          }
        });
      }
    },
  },
};
</script>
<style>
page {
  box-sizing: border-box;
}
</style>
<style lang="scss" scoped>
.container {
  background-color: #f7f7f7;
  width: 100vw;
  height: 100vh;
}
.card {
  width: calc(686rpx - 50rpx);
  background-color: white;
  margin: 20rpx auto 0 auto;
  padding: 50rpx 25rpx;
  border-radius: 12rpx;
}
.con {
  font-size: 29rpx;
  &:first-child {
    margin-bottom: 70rpx;
  }
  .oper {
    display: flex;
    justify-items: flex-start;
    margin-bottom: 26rpx;
    text {
      margin-left: 54rpx;
      color: #51bdf1;
    }
  }
  .tip {
    color: #18181880;
    margin-top: 8rpx;
  }
}
.footer {
  position: fixed;
  bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: white;
  width: 100vw;
  left: 0;
}
.order-broadcast {
  @extend .card;
  padding: 23rpx 25rpx;
  .left {
    color: #131313;
    font-weight: 550;
  }
  .error {
    color: red;
  }
}
</style>
